<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    	<!--view-->
        <div id="app">
        	<input type="text" v-model="message">
            {{ message }}
        </div>
        
        <div id="app-2">
		  <span v-bind:title="message">
		   	 鼠标悬停几秒钟查看此处动态绑定的提示信息！
		  </span>
		</div>
		
		<div id="app-3">
		  <p v-if="seen">现在你看到我了</p>
		</div>
		
		<div id="app4">
			<ul>
				<li v-for="item in names">{{item.name}}</li>
			</ul>
		</div>
		
		<div id="app5">
			<p>{{message}}</p>
			<button v-on:click="exec()">倒序</button>
		</div>
		
		<!--组件-->
		<div id="app6">
		  <ol>
		    <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
		  </ol>
		</div>
		
		
		
		
		
		
		
		<script src="js/vue.js"></script>
	    <script>
			// 链接 model 和 view
	        var app = new Vue({
	            el: '#app',
	            data: {
	            	message: 'Hello World!'
	       	 	}
	        });
	        
	        var app2 = new Vue({
			  el: '#app-2',
			  data: {
			    message: '页面加载于 ' + new Date().toLocaleString()
			  }
			});
	        
	        var app3 = new Vue({
			  el: '#app-3',
			  data: {
			    seen: true
			  }
			});
        
        	var app4 = new Vue({
        		el: "#app4",
        		data: {
        			names: [
	        			{
	        				name: 'lxk'
	        			},
	        			{
	        				name: 'fxy'
	        			},
	        			{
	        				name: 'yjf'
	        			}
	        		]
        		}
        	});
        	
        	var app5 = new Vue({
        		el: "#app5",
        		data: {
        			message: '我是好人',
        		},
        		methods: {
        			exec: function(){
        				this.message = this.message.split('').reverse().join('');
        			}
        		}
        	});
        	
        	
        	// 组件
			Vue.component('todo-item', {
			  props: ['todo'],
			  template: '<li>{{todo.text}}</li>'
			})
			var app7 = new Vue({
			  el: '#app6',
			  data: {
			    groceryList: [
			      { id: 0, text: '蔬菜' },
			      { id: 1, text: '奶酪' },
			      { id: 2, text: '随便其他什么人吃的东西' }
			    ]
			  }
			});
    	</script>
    </body>
</html>